<!DOCTYPE HTML>
<html lang="en">
<head>
<!--=============== basic  ===============-->

	<meta charset="UTF-8">
	<title>Cashemir. Responsive One Page Portfolio</title>
	<meta name="description" content="Your website description here">
	<meta name="keywords" content="your, website, keywords, here">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	
<!--=============== css  ===============-->	
    <link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/magnific-popup.css" media="all">
	<link rel="stylesheet" href="css/superslides.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/shortcodes.css" type="text/css"> 
	
<!--=============== fonts  ===============-->

	<link href='http://fonts.useso.com/css?family=Oswald:400,700|Open+Sans:400,300' rel='stylesheet' type='text/css'>
	
<!--=============== colors  ===============-->	

	<link rel="alternate stylesheet" type="text/css" href="css/blue-style.css" title="blue" media="screen" />
	<link rel="alternate stylesheet" type="text/css" href="css/green-style.css" title="green" media="screen" />
	<link rel="alternate stylesheet" type="text/css" href="css/yellow-style.css" title="yellow" media="screen" />
	<link rel="alternate stylesheet" type="text/css" href="css/orange-style.css" title="red" media="screen" />




<!--=============== modernizr  ===============-->

	<script src="js/modernizr.custom.97074.js"></script>
	
<!--=============== google map ===============-->

	<!--=============== ie styles  ===============-->

	<!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/ie8.css" /><![endif]-->
	
<!--=============== favicons ===============-->

	<link rel="shortcut icon" href="images/favicon.ico">

</head>

<body onLoad="initialize()">

<div id="main">
<!--=============== navigation ===============-->

	<div class="navigation isDown">
	
		<div class="nav-overlay"></div>
		
		<div class="nav-button transition">
			<span></span>
			<span></span>
			<span></span>
		</div>
		
		<div class="inner">
			<img src="images/logo.png" class="logo" alt="" title="">
			
			<div class="link-holder" id="nav">
			<ul>
				<li><a href="index.html#about">About</a></li>
				<li><a href="index.html#servises">Services</a></li>
				<li><a href="index.html#portfolio">Portfolio</a></li>
				<li><a href="index.html#resume">Resume</a></li>
				<li><a href="index.html#contacts">Contacts</a></li>
				<li><a href="blog.html">Blog</a></li>
				<li class="current"><a href="shortcodes.html">Shortcodes</a></li>
			</ul>
			</div>
			
		</div>
	
		<div class="social-list">
			
			<ul>
				<li><a href="#"  target="_blank"><i class="fa fa-facebook fa-2x"></i></a></li>
				<li><a href="#"  target="_blank"><i class="fa fa-twitter fa-2x"></i></a></li>
				<li><a href="#"  target="_blank"><i class="fa fa-linkedin fa-2x"></i></a></li>	
			</ul>
						
		</div>	
			 
	</div><!--=============== navigation end ===============-->

	<div class="overlay fixed-overlay body-overlay"></div>		
	<div class="wrapper">

	
	<div id="shortcodes" class="sections">
	
	<div class="container">
		<div class="title">
			<h2>Shortcodes</h2>
		</div>
	 
		<div class="shortcode grid-full">
		<h3 class="sc-title">Accordion &amp; toggle.</h3>
	 
		<div class="grid-3">
		
		<!--=============== accordion ===============-->	
				
		<div class="accordion" rel="1">
			<div class="accordion-title">
				<h5><span><i class="fa fa-cogs"></i></span><a href="#">First Title</a></h5>
			</div>
			<div class="accordion-inner">
			Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.
			</div>
			
			<div class="accordion-title">
			<h5><span><i class="fa fa-cogs"></i></span><a href="#">Second Title</a></h5>
			</div>
			<div class="accordion-inner">
			Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.
			</div>
			
			<div class="accordion-title">
				<h5><span><i class="fa fa-cogs"></i></span><a href="#">Third Title</a></h5>
			</div>
			<div class="accordion-inner">
			Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.
			</div>
		</div>
		
	</div>
	 
	<div class="grid-3">
	
	<!--=============== toggle ===============-->	
	
		<div class="toggle">
			<div class="toggle-title">
				<h5>
					<span class="title-name">First Toggle</span>
				</h5>
			</div>
			<div class="toggle-inner">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			</div>
		</div> 
		
		<div class="toggle">
			<div class="toggle-title">
				<h5>
					<span class="title-name">Second Toggle</span>
				</h5>
			</div>
			<div class="toggle-inner">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			</div>
		</div> 
		
		<div class="toggle">
			<div class="toggle-title active">
				<h5>
					<span class="title-name">Open Toggle</span>
				</h5>
			</div>
			<div class="toggle-inner">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			</div>
		</div> 
		
		</div>
	</div>
	 
	 
	<div class="shortcode grid-full">
		<h3 class="sc-title">Tabs </h3>

		
	<!--=============== tabs ===============-->
		
		<div class="tabs">
			<ul>
				<li><a href="#tab-1">First <i class="fa fa-cogs"></i></a></li>
				<li><a href="#tab-2">Second <i class="fa fa-cogs"></i></a></li>
				<li><a href="#tab-3">Third <i class="fa fa-cogs"></i></a></li>
			</ul>
			<div id="tab-1">
			<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris.Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.</p>
			</div>
			
			<div id="tab-2">
			<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris.Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.</p>
			</div>
			
			<div id="tab-3">
			<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris.Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.</p>
			</div>
			
		</div>
		
	
	

	</div>
	<!--=============== grid ===============-->
	
	<div class="shortcode grid-full">
		<h3 class="sc-title">The grid.</h3>
		<div class="grid-shortcode grid-full">100%</div>
		<div class="grid-shortcode grid-half">50%</div>
		<div class="grid-shortcode grid-half">50%</div>
		<div class="grid-shortcode grid-2">30%</div>
		<div class="grid-shortcode grid-4">70%</div>
		<div class="grid-shortcode grid-2">30%</div>
		<div class="grid-shortcode grid-2">30%</div>
		<div class="grid-shortcode grid-2">30%</div>
		<div class="grid-shortcode grid-5">80%</div>
		<div class="grid-shortcode grid-1">20%</div>
		<div class="grid-shortcode grid-1">13%</div>
		<div class="grid-shortcode grid-1">13%</div>
		<div class="grid-shortcode grid-1">13%</div>
		<div class="grid-shortcode grid-1">13%</div>
		<div class="grid-shortcode grid-1">13%</div>
		<div class="grid-shortcode grid-1">13%</div>
	</div>
	 
	<div class="shortcode grid-full">
	
		<h3 class="sc-title">Modals &amp; Typography &amp; Tooltips</h3>
		<div class=" grid-4">
		
		<!--=============== blockquote ===============-->
		
			<div class="blockquote" name="tooltip" title="blockquote">			
			<p>Lorem ipsum dolor sit amet, nunc ea, velit nisl, lorem lacus, pulvinar ac. Officia ipsum cras ut vel, odio dolor, nulla potenti nibh. Vestibulum convallis nulla amet quis. Lacus nulla suspendisse diam, posuere ipsum sit ac, tincidunt sapien, ut ipsum vel ligula nec pulvinar erat.</p>
			</div>
			
		</div>
		
		<div class="grid-2 typo">
			<div class="grid-half ">
			
				<h3 name="tooltip" title="h3">Lorem ipsum </h3><br>
				<h4 name="tooltip" title="h4">Lorem ipsum</h4><br>
				<h5 name="tooltip" title="h5">Lorem ipsum</h5><br>
				<h6 name="tooltip" title="h6">Lorem ipsum</h6><br>
				
			</div>
		<!--=============== modals ===============-->	
		
		<div class="grid-half popup">
			
			<a href="http://www.youtube.com/watch?v=pBJEislqmkU" class="popup-youtube" name="tooltip" title="Youtube Modal"><span class="shortcode-link">Youtube</span></a><br>
			<a href="http://vimeo.com/64128885" class="popup-vimeo" name="tooltip" title="Vimeo Modal"><span class="shortcode-link">Vimeo</span></a><br>
			<a href="images/folio/1.jpg" class="image-popup" name="tooltip" title="Single image Modal"><span class="shortcode-link">Single image</span></a><br>
			
		</div>
			
	</div>
	
	
	<div class="grid-full">
		<p style="max-width:100% !important">Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec. Vulputate mi dui suscipit, molestie vulputate libero fusce iaculis suscipit. Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer, neque magnis penatibus laoreet vehicula nulla orci, a malesuada justo laoreet ipsum, in ac fusce. At sapien neque sollicitudin lacus, dolor semper in laoreet, magnis convallis posuere adipiscing, dapibus suspendisse nonummy pellentesque consequat interdum odio. <span class="pullquote align-left">Left. Suspendisse mi, id suspendisse ac mauris, wisi vel nam, sociis velit dolor vitae sem id quam, est vivamus elit mi fringilla aliquam euismod.</span> Ut aenean pellentesque felis at turpis bibendum, duis eu consectetur sed tellus, blandit pulvinar dictum ac wisi libero a, nec sed ac elit. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec, iaculis aenean, parturient velit elit ac viverra vestibulum, quis et nascetur rutrum nibh molestie fusce. Et quis magna elit varius magna, ac in iaculis donec ligula vehicula suspendisse. Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer, neque magnis penatibus laoreet vehicula nulla orci, a malesuada justo laoreet ipsum, in ac fusce. <span class="pullquote align-right">Right. Ut nulla nonummy eget sodales, sed nibh natoque purus wisi, sapien ut sollicitudin sed. At sapien neque sollicitudin lacus, dolor semper in laoreet</span> Magnis convallis posuere adipiscing, dapibus suspendisse nonummy pellentesque consequat interdum odio. Suspendisse mi, id suspendisse ac mauris, wisi vel nam, sociis velit dolor vitae sem id quam, est vivamus elit mi fringilla aliquam euismod. Hendrerit justo dolor. Sed euismod malesuada volutpat consectetuer cras, eu placerat felis, facilisi vivamus nec, malesuada cum tellus sed nunc duis nulla. Lacus nulla suspendisse diam, posuere ipsum sit ac, tincidunt sapien, ut ipsum vel ligula nec pulvinar erat. Lacus nulla suspendisse diam, posuere ipsum sit ac, tincidunt sapien, ut ipsum vel ligula nec pulvinar erat.</p>
	</div>
	
	</div>
	
	<div class="shortcode grid-full clear ">
	
		<h3 class="sc-title">Headers</h3>
	
		<div class="grid-2">
		
			<h2 class="border-header">Lorem ipsum</h2>
		
		</div>
		<div class="grid-2">
		
			<h2 class="small-header">Lorem ipsum</h2>
			<div class="header-separator"></div>
		
		</div>
		
		<div class="grid-2">
		
			<div class="line-header">
				<span>Lorem ipsum</span>
			</div>
		
		</div>
		
	 </div>
	 
	<div class="shortcode grid-full clear ">
	
		<h3 class="sc-title">Responsive video</h3>
		
		<div class="grid-3">
			<div class="video-container">
         		<iframe width="560" height="315" src="//www.youtube.com/embed/pBJEislqmkU" frameborder="0" allowfullscreen></iframe>
			</div>
		
		</div>
		
		<div class="grid-3">
			<div class="video-container">
				<iframe src="//player.vimeo.com/video/64128885" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
			</div>	 
	 	</div>

	</div>
	
	 
		<div class="shortcode grid-full clear " style="padding-top:50px;">
		<h3 class="sc-title">Testimonials with photo</h3>
		</div>
		
	</div>

</div>


	<div id="testimonials" class="sections">
		<div class="content">
			<div class="quote-icon"><i class="fa fa-quote-right"></i></div>
			<div class="rester"></div>
			<div class="rester black"></div>
			
			<div class="container">
			

				
				
				<div class="clear"></div>
				
					<div id="clientsay" class="owl-carousel">
					
					<!--1 testimontal -->
					
						<div class="item">
						
							<div class="client-image"><img src="images/user.jpg" class="respimg" alt=""></div>				
							<p>" Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu. Sed ut perspiciatis unde omnis iste natus error sit  "</p>
							<span>- Quincafe Via Facebook -</span>
							
						</div>
						
					<!--2 testimontal -->
						
						<div class="item">
						
							<div class="client-image"><img src="images/user.jpg" class="respimg" alt=""></div>	
							<p>" Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis mollis nec leo at viverra. Ut quis malesuada urna. Nunc cursus aliquet est "</p>
							<span>- Bayzug via Twitter -</span>
							
						</div>
	
					<!--3 testimontal -->
						
						<div class="item">
						
							<div class="client-image"><img src="images/user.jpg" class="respimg" alt=""></div>
							<p>" There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form "</p>
							<span>- Evroname via Facebook -</span>
							
						</div>
						
					</div>
				
				</div>
							
		</div>
		
	</div><!-- section testimontal end -->	
	
	<div class="sections ws share">
		<div class="shortcode grid-full">
			<div class="container">
				<h3 class="sc-title">Social  buttons</h3>
	
					<div class="grid-2">
						<h3>Only icons</h3>
						<ul class="share-list only-icons">
							<li style="background:#2DACD7" name="tooltip" title="Follow on Twitter"><a href="https://twitter.com" class="transition" target="_blank"><i class="fa fa-twitter"></i></a></li>
							<li style="background:#3b5998" name="tooltip" title="Follow on Facebook" ><a href="https://www.facebook.com/" target="_blank" class="transition"><i class="fa fa-facebook"></i></a></li>
							<li style="background:#cf4231" name="tooltip" title="Follow on g+"><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus" class="transition"></i> </a></li>
							<li style="background:#ff0084" name="tooltip" title="Follow on Dribbble"><a href="http://dribbble.com/" target="_blank"><i class="fa fa-dribbble" class="transition"></i></a></li>
							<li style="background:#cb2027" name="tooltip" title="Follow on Pinterest"><a href="http://pinterest.com/" target="_blank"><i class="fa fa-pinterest" class="transition"></i> </a></li>
						</ul>
					</div>
					<div class="grid-4">
						<h3>Icons + text</h3>
						<ul class="share-list">
							<li style="background:#2DACD7"><a href="https://twitter.com" class="transition" target="_blank"><i class="fa fa-twitter"></i> Twitter</a></li>
							<li style="background:#3b5998"><a href="https://www.facebook.com/" target="_blank" class="transition"><i class="fa fa-facebook"></i> Facebook</a></li>
							<li style="background:#cf4231"><a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus" class="transition"></i> Google + </a></li>
							<li style="background:#ff0084"><a href="http://dribbble.com/" target="_blank"><i class="fa fa-dribbble" class="transition"></i> Dribbble</a></li>
							<li style="background:#cb2027"><a href="http://pinterest.com/" target="_blank"><i class="fa fa-pinterest" class="transition"></i> Pinterest </a></li>
						</ul>
					</div>		
			</div>
		
		</div>
	</div> 
	
<!--=============== section contacts ===============-->

	<div id="contacts" class="sections">
		<div class="content">
			<div class="container">
			
				<!--contact form -->
									
				<div class="contactForm clear">
					<fieldset id="contact_form">											
								
						<div class="grid-half">
							<label for="name">Name</label>
							<input type="text" name="name" id="name" />
						</div>
								
						<div class="grid-half">
							<label for="email" class="em">Email</label>
							<input type="text" name="email" id="email"  class="right" />
						</div>
								
						<label for="message" class="m-top">Message</label>
						<textarea name="message"  id="message" ></textarea>
								
						<div class="clear"></div>
															
						<label>
							<button class="submit_btn transition" id="submit_btn">SEND</button>
						</label>
						<div id="result"></div>
						
					</fieldset>
						
				</div>
		
				<div class="contact-details">
				
	
					<div class="grid-2">
						<div class="smallicon animaper phone"><i class="fa fa-mobile fa-2x"></i></div>
						<span>+7(111)123456789</span>
					</div>
						
					<div class="grid-2 showform">
						<div class="smallicon actform  animaper"><i class="fa fa-envelope-o fa-2x"></i></div>
						<span>yourmail@domain.com</span>
					</div>
						
					<div class="grid-2">
						<div class="smallicon animaper showmap mnv "><i class="fa fa-home fa-2x"></i></div>
						<span>Third Main Street, 27th Brooklyn,<br> NY City 1000-204 NY</span>
					</div>
						
				</div>						
				
			</div>
			
			<!--map-->
			<div class="mapbox">
				<div class="map-decor"></div>
				<div class="close-map"><img src="images/close-white.png" alt=""><div class="triangle"></div></div>
				<div id="map_canvas"></div>
			</div>
				
			<!--footer start-->

			<div class="footer clear">
			
				<p>Cashemir  ©2014  All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
				<div class="small-separator ws"></div>
				
			</div> <!--footer end-->
			
		</div>
	</div><!--=============== section contacts end ===============-->
	

	
</div><!--=============== wrapper end ===============-->
		
		
</div><!--=============== main end ===============-->
 
<!--=============== javascript ===============-->

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jpreloader.min.js"></script>
	<script type="text/javascript" src="js/smoothscroll.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/superslides.js"></script>
	<script type="text/javascript" src="js/mixitup.js"></script>
	<script type="text/javascript" defer src="js/jquery.flexslider.js"></script>
	<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
	<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
	<script type="text/javascript" src="js/hoverdir.js"></script>
	<script type="text/javascript" src="js/owl.carousel.min.js"></script>
	<script type="text/javascript" src="js/appear.js"></script>
	<script type="text/javascript" src="js/jquery.nav.js"></script>
	<script type="text/javascript" src="js/fitvids.js"></script>
	<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
	<script type="text/javascript" src="js/jquery.hammer.min.js"></script>
	<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
	<script type="text/javascript" src="js/jquery.sticky.js"></script>
	<script type="text/javascript" src="js/shortcodes.js"></script> 
	<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>